<!DOCTYPE html>
<html>
<head>
    <title><{$config['title']}></title>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="__PUBLIC__/skin/login.css"/>
    <script type="text/javascript" src="__PUBLIC__/script/jquery1.11.3.min.js"></script>
    <!--[if IE 8]>
    <script src="__PUBLIC__/script/jquery-1.8.3.min.js" type="text/javascript"></script>
    <![endif]-->
    <script type="text/javascript" src="__PUBLIC__/layer/layer.js"></script>
<body>
<header>
    <div class="second row">
        <label class="font">&#xe638;</label>
        <p class="inline title"><{$config['title']}></p>
    </div>
</header>

<div class="content">
    <div class="row login">
        <div class="box">
            <div class="tab">
                <p class="active">账号密码登录</p>
            </div>
            <div id="pwd_login" style="display: block">
                <div class="input user">
                    <label class="font user_icon">&#xe60c;</label>
                    <input type="text" name="username" placeholder="请输入账号" id="user">
                </div>
                <div class="input pwd">
                    <label class="font pwd_icon">&#xe609;</label>
                    <input type="password" name="password" placeholder="请输入密码" id="pwd">
                </div>
                <button class="submit" id="submit" style="">登录</button>
            </div>
        </div>
    </div>
</div>

<footer>
    <p>
        <{$config['title']}>
        <span class=copyright>© <{:date('Y')}></span>
    </p>
</footer>
<script type=text/javascript>

    // 提交按钮被点击
    $('#submit').on('click',function(){
        var params = {};
        params.username = $('#user').val();
        params.password = $('#pwd').val();
        if(!params.username){
            layer.msg('请输入账号', {icon: 2});
            return;
        }
        if(!params.password){
            layer.msg('请输入密码', {icon: 2});
            return;
        }
        $.ajax({
            url:"<{:U('Login/dologin')}>",
            type:'POST',
            data:params,
            dataType:'json',
            success:function(data){
                if (data.status == "200") {
                    // 登陆成功，跳转到后台首页
                    layer.msg(data.message, {icon: 1});
                    setTimeout(function(){
                        window.location.href = data.data.redirect;
                    },1000);
                }else{
                    layer.msg(data.message, {icon: 2});
                }
            },
            async:true
        });
    });



    $(document).keypress(function(e) {
        // 回车键事件
        if(e.which == 13) {
            $("#submit").click();
        }
    });


    var user         = document.getElementById('user');
    var pwd          = document.getElementById('pwd');
    //密码输入框获取焦点与失去焦点样式变化
    user.addEventListener('focus',function () {
        document.getElementsByClassName('user')[0].style.border = "1px solid #1b926c"
        document.getElementsByClassName('user_icon')[0].style.color = "#1b926c"
    });
    user.addEventListener('blur',function () {
        document.getElementsByClassName('user')[0].style.border = "1px solid rgba(0,0,0,.08)"
        document.getElementsByClassName('user_icon')[0].style.color = "#ccc"
    });
    pwd.addEventListener('focus',function () {
        document.getElementsByClassName('pwd')[0].style.border = "1px solid #1b926c"
        document.getElementsByClassName('pwd_icon')[0].style.color = "#1b926c"
    });
    pwd.addEventListener('blur',function () {
        document.getElementsByClassName('pwd')[0].style.border = "1px solid rgba(0,0,0,.08)"
        document.getElementsByClassName('pwd_icon')[0].style.color = "#ccc"
    });

</script>